<template>
	<view class="body">
		<xk-header title="意见反馈处理"></xk-header>
		<view class="list" >
			<view class="list-item header" @click="more = !more">
				<view>工单信息:  {{pmFeedback.apply_no}}</view>
				<image v-if="!more" src="/static/up.png"></image>
				<image v-else  src="/static/down.png"></image>
			</view>
			<view v-if="more" class="data-item">
				<view class="order-info">
					<view class="info-item"><view class="key">反馈类型：</view>{{feedBackType[pmFeedback.fb_type]}}</view>
					<view class="info-item"><view class="key">空间区域：</view>{{pmFeedback.fb_address}}</view>
					<view class="info-item"><view class="key">反馈问题：</view>{{pmFeedback.fb_desc}}</view>
					<view class="info-item"><view class="key">反馈人：</view>{{pmFeedback.apply_user || '暂无'}}</view>
					<view class="info-item"><view class="key">业主单位：</view>{{pmFeedback.apply_company_name || '暂无'}}</view>
					<view class="info-item"><view class="key">联系电话：</view>{{pmFeedback.apply_phone || '暂无'}}</view>
					<view class="info-item"><view class="key">反馈时间：</view>{{pmFeedback.apply_date}}</view>
					<view v-if="pmFeedback.fb_pic" class="info-item"><view class="key"></view>
						<image-list :pics="pmFeedback.fb_pic"></image-list>
					</view>
				</view>
			</view>
		</view>

		<view class="list">
			<view class="list-item header" >
				<view><view class="header-icon"></view>工单受理</view>
			</view>
			<picker :range="followManList" range-key="user_name" :value="followManIndex" @change="followmanChange">
				<view class="list-item">
					<view>跟进人：</view>
					<view :class="formData.followman_id ? 'right-title1' : 'right-title1 right-title1-empty'">{{formData.followman_id ? followManList[followManIndex].user_name : "请选择"}}</view>
					<image mode="aspectFill" class="jiantou" src="/static/jiantou.png"/>
				</view>
			</picker>
			<view >
				<view class="list-item textarea">
					<view>受理意见：</view>
					<textarea v-model="formData.accept_remark" placeholder="在此输入您的受理意见" placeholder-class="placeholder"/>
				</view>
			</view>
		</view>
		<view class="common-bottom-view">
			<view class="common-btn btn-plant btn" @click="acceptFeedback('20')">拒绝受理</view>
			<view class="common-btn btn" @click="acceptFeedback('10')">同意受理</view>
		</view>
		<view class="common-zw"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				backMore: true,
				more: true,
				feedBackType: {},
				isAccepter: false,
				pmFeedback: {},
				followManList: [],
				followManIndex: '',
				formData: {
					pm_feedback_id: '',
					accept_result: '',
					followman_id: '',
					accept_remark: '',
					isSubmit: true
				}
			};
		},
		computed:{
			fbType(){
				return this.feedBackType[this.pmFeedback.fb_type]
			}
		},
		onLoad(options){
			this.formData.pm_feedback_id = options.feedBackId;

			// if(this.$util.getRights().pm_feedback_accept) {
			// 	this.isAccepter = true;
			// }else{
			// 	let loginInfo = this.$util.getStorage("loginInfo")
			// 	this.formData.followman_id = loginInfo.id
			// }
			this.initConst();
		},
		methods:{
			initConst(){
				this.$util.initFeedbackType().then((res)=>{
					console.log('initFeedbackType', res)
					this.feedBackType = res;
					this.getFeedBackData();
				})
				// if(this.isAccepter){
				let query = this.$util.formatGraphqlQuery([{
					fun: 'followManList: baseData_getPmFeedbackFollowManList',	// 跟进人员
					params: {},
					result: "user_id, user_name"
				}])
				this.$util.postGraphql({query}).then((res)=>{
					this.followManList = res.followManList
				})
				// }
			},
			getFeedBackData(){
				this.$api.baseData_getPmFeedback(this.formData.pm_feedback_id).then((res)=>{
					this.pmFeedback = res.pmFeedback
				})
			},
			followmanChange(e){
				this.followManIndex = e.detail.value;
				this.formData.followman_id = this.followManList[this.followManIndex].user_id;
			},
			acceptFeedback(accept_result){
				let content = ""
				let confirmText = ""
				if(accept_result == '10'){
					if(!this.formData.followman_id){
						this.$util.toast('请选择跟进人员')
						return
					}
					content = "确认要受理反馈意见？"
					confirmText = "同意受理"
				} else {
					if(!this.formData.accept_remark){
						this.$util.toast('请填写受理备注')
						return
					}
					content = "确认要拒绝受理反馈意见？"
					confirmText = "拒绝受理"
				}
				this.$util.confirm({
					content,
					confirmText
				}).then(isConfirm => {
					if (isConfirm) {
						this.formData.accept_result = accept_result;
						this.$util.post({
							url: "app/pmFeedback/accept",
							data: this.formData
						}).then((res)=>{
							uni.redirectTo({
								url:'/pagesA/ideas-box/ideas-box-finish?type=accept'
							})
						});
					}
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
.list {
	margin: 20rpx 30rpx;
	background-color: #FFFFFF;
	border-radius: 10rpx;
	.list-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #333333;
		font-size: 28rpx;
		padding: 30rpx 20rpx;
		:first-child {
			color: #999999;
		}
		.right-title1{
			flex: 1;
			text-align: right;
			color: #333;
		}
		.right-title1-empty {
			color: #ccc;
		}
		.jiantou {
			width: 14rpx;
			height: 24rpx;
			margin-left: 10rpx;
		}
	}
	.textarea{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		textarea{
			margin-top: 20rpx;
			padding: 16rpx 20rpx;
			background-color: #F9F9F9;
			border-radius: 10rpx;
			height: 130rpx;
			font-size: 28rpx;
			color: #333333;
		}
	}
	.list-item2{
		font-size: 28px;
		color: #333333;
		display: flex;
		align-items: center;
		color: #333333;
		font-size: 28rpx;
		padding: 22rpx 20rpx;
		:first-child {
			width: 150rpx;
		}
	}
	.header{
		font-size: 32rpx;
		font-weight: bolder;
		color: #333333;
		:first-child {
			flex: 1;
			color: #333333;
		}
		image{
			width: 24rpx;
			height: 24rpx;
		}
	}
}
.data-item{
	// display: flex;
	// margin-bottom: 30rpx;
	padding: 0 20rpx 20rpx;
	.order-type{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: #333333;
		text{
			font-weight: bolder;
		}
	}
	.order-info{
		margin: 20rpx 0;
		.info-item{
			display: flex;
			font-size: 28rpx;
			color: #333333;
			line-height: 50rpx;
			.key{
				min-width: 150rpx;
				font-size: 28rpx;
				color: #999999;
			}
			.info-imgs{
				display: flex;
				flex-wrap: wrap;
				.img-item{
					width: 120rpx;
					height: 120rpx;
					margin: 2rpx 2rpx 0 0;
				}
			}
		}
		.error{
			color: #FF3737;
		}
	}
}
.btn-view {
	display: flex;
	justify-content: space-around;
	.btn {
		width: 290rpx;
		height: 88rpx;
	}
}
</style>
